<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 左侧栏 (7份宽度) -->
      <el-col :span="7">
        <el-card class="chart-card">
          <h4>图表1</h4>
          <div class="chart" id="chart-left-1"></div>
        </el-card>
        <el-card class="chart-card">
          <h4>图表2</h4>
          <div class="chart" id="chart-left-2"></div>
        </el-card>
        <el-card class="chart-card">
          <h4>图表3</h4>
          <div class="chart" id="chart-left-3"></div>
        </el-card>
      </el-col>

      <!-- 中间栏 (10份宽度) -->
      <el-col :span="10">
        <!-- 主图 -->
        <el-card class="main-chart-card">
          <h4>主图表</h4>
          <div class="main-chart" id="chart-center-main">
            <Main_Map></Main_Map>
          </div>
        </el-card>

        <!-- 底部三张小图 -->
        <el-row :gutter="10" class="bottom-mini-charts">
          <el-col :span="8">
            <el-card class="mini-chart-card">
              <h5>小图1</h5>
              <div class="mini-chart" id="chart-center-mini-1"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="mini-chart-card">
              <h5>小图2</h5>
              <div class="mini-chart" id="chart-center-mini-2"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="mini-chart-card">
              <h5>小图3</h5>
              <div class="mini-chart" id="chart-center-mini-3"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>

      <!-- 右侧栏 (7份宽度) -->
      <el-col :span="7">
        <el-card>
          <div style="width: 100%;height: 200px" id="spmBar"></div>
        </el-card>
        <el-card>
          <div style="width: 100%;height: 200px" id="so2Bar"></div>
        </el-card>
        <el-card>
          <div style="width: 100%;height: 200px" id="coBar"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

import { ref, inject} from "vue";
import Main_Map from "@/views/HOME/Main_Map.vue";

const axios = inject("axios");

const provinceItemTotalArr = ref([]);

const spmOption = {
  title: {
    text: '悬浮颗粒物（PM2.5）浓度超标累计',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'left'
  },
  xAxis: {
    type: 'category',//类目轴
    data: provinceItemTotalArr.value.map(item => item.provinceAbbr || item.provinceName)//x轴数据 重要！！
  },
  yAxis: {
    type: 'value'//数值轴
  },
  series: [
    {
      name: 'PM2.5超标累计',
      data: provinceItemTotalArr.value.map(item => item.spmTotal),//y轴数据 重要！！
      type: 'bar',//柱状图 重要！！
      stack: "total",
      emphasis: { focus: "series" },
      smooth: true//平滑曲线
    },
  ]
};

onMounted(() => {
  let spmBarDom = document.getElementById('spmBar');//获取DOM元素
  let spmBarDomChart = echarts.init(spmBarDom);//初始化echarts实例
  spmBarDomChart.setOption(spmOption);//设置图表配置


});

const init = () => {
  axios
      .post("statistics/listProvinceItemTotalStatis")
      .then((response) => {
        console.log(response.data);  // 打印返回的结果
        provinceItemTotalArr.value = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
};
init();

</script>

<style scoped>
.dashboard-container {
  padding: 1px;
}

/* 通用卡片样式 */
.chart-card, .main-chart-card, .mini-chart-card {
  margin-bottom: 15px;
}

/* 左侧和右侧图表 */
.chart {
  width: 100%;
  height: 200px; /* 可根据实际内容调整 */
}

/* 中间主图表 */
.main-chart {
  width: 100%;
  height: 400px; /* 比两侧图表更高 */
}

/* 底部三张小图容器 */
.bottom-mini-charts {
  margin-top: 15px;
}

/* 底部小图 */
.mini-chart {
  width: 100%;
  height: 150px; /* 比两侧图表稍小 */
}

/* 标题样式 */
h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}
h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}
</style>